<!--  登录   -->
<template>
	<div class="login-container">
		<div class="sys-logo">
			<img :src="sysLogo" />
		</div>
		<div class="box-item desc">
			<div class="welcome">
				<p>{{ APP_CONFIG.websiteName }}</p>
				<p class="sub-welcome">{{ APP_CONFIG.websiteSubName }}</p>
			</div>
		</div>
		<div class="box-item login">
			<div class="login-title">账号登录</div>
			<a-form ref="formRef" class="login-form" :model="loginForm" :rules="rules">
				<a-form-item name="loginName">
					<a-input v-model:value.trim="loginForm.loginName" placeholder="请输入用户名" />
				</a-form-item>
				<a-form-item name="password">
					<a-input-password
						v-model:value="loginForm.password"
						autocomplete="on"
						:type="showPassword ? 'text' : 'password'"
						placeholder="请输入密码"
					/>
				</a-form-item>
				<!-- <a-form-item name="captchaCode">
					<a-input class="captcha-input" v-model:value.trim="loginForm.captchaCode" placeholder="请输入验证码" />
					<img class="captcha-img" :src="captchaBase64Image" @click="getCaptcha" />
				</a-form-item> -->
				<a-form-item>
					<a-checkbox v-model:checked="rememberPwd">记住密码</a-checkbox>
				</a-form-item>
				<a-form-item>
					<div class="btn" @click="onLogin">登录</div>
				</a-form-item>
			</a-form>
			<div class="more">
				<div class="title-box">
					<p class="line"></p>
					<p class="title">其他系统登录地址</p>
					<p class="line"></p>
				</div>
				<div class="login-type">
					<a :href="oneAccessPage">前往统一认证登录</a>
					<!-- <a-button  type="link">前往统一认证登录</a-button> -->
					<!-- <a target="_blank" href="https://developer.work.weixin.qq.com/document/path/90556"><img :src="wechatIcon" /></a> -->
					<!-- <a target="_blank" href="https://open.dingtalk.com/document/orgapp/learning-map?spm=a1z24xqo.29421158.0.0.65633c33pMT1Oh"
						><img :src="DDIcon"
					/></a>
					<a target="_blank" href="https://smartadmin.vip/views/v3/base/About.html"><img :src="SmartAdminIcon" /></a> -->
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import { onMounted, onUnmounted, reactive, ref, h } from 'vue';
	import { useRouter } from 'vue-router';
	import { useUserStore } from '@/store/modules/user'; 
	//接口及工具
	import { loginApi } from '@/api/login-api';
	import { KEY_CONST, LOGIN_DEVICE_ENUM, APP_CONFIG } from '@/constants/system-const';
	import tool from '@/utils/tool';
	//图片
	import sysLogo from '@/assets/images/common/logo.png';
	// import SmartAdminIcon from '@/assets/images/login/smart-admin-logo.png';
	// import wechatIcon from '@/assets/images/login/wechat-icon.png';
	// import DDIcon from '@/assets/images/login/dingding-logo.png';
	import hexMD5 from '@/utils/md5';

	const VITE_APP_doMain = import.meta.env.VITE_APP_doMain;
	//--------------------- 登录表单 ---------------------------------
	let loginForm = reactive({
		loginName: '',
		password: '',
		// captchaCode: '',
		// captchaUuid: '',
		loginDevice: LOGIN_DEVICE_ENUM.PC.value,
	});
	const rules = {
		loginName: [{ required: true, message: '用户名不能为空' }],
		password: [{ required: true, message: '密码不能为空' }],
		// captchaCode: [{ required: true, message: '验证码不能为空' }],
	}; 
	const showPassword = ref(false);
	const router = useRouter();
	const formRef = ref();
	const rememberPwd = ref(false);
	const oneAccessPage = ref('');
	let doMain ="";
	onMounted(() => {
		doMain = window.location.origin;
		let href = window.location.href;
		href = decodeURI(href);
		const param = tool.getURLParams(href);
		//token=11111&os_u_name=22222&os_u_full_name=33333&os_u_token_last_time
		if(param.token){
			//已登录成功！
			getUserInfo(param);
			return;
		}
		document.onkeyup = (e) => {
			if (e.keyCode === 13) {
				onLogin();
			}
		};
		const userName = tool.readLocalStorage("RP_USER_NAME");
		const pwd =  tool.readLocalStorage("RP_USER_PWD");
		if(userName && pwd){
			loginForm = Object.assign(loginForm,{
				loginName: userName,
				password: pwd,
			});
			rememberPwd.value = true;
		}; 
		//统一认证登录
		oneAccessPage.value =doMain + "/i/system/login_cas.jsp?url="+VITE_APP_doMain+"#/login";
	});
	onUnmounted(() => {
		document.onkeyup = null;
	});
	//登录
	async function onLogin() {
		formRef.value.validate().then(async () => {
			try {
				tool.showLoading();
				// 密码加密
				let reqParam = {
					user_name:loginForm.loginName,
					user_password: hexMD5.hexMD5(loginForm.password),
				}
				const res = await loginApi.login(reqParam);
				if(res.code=="0"){
					getUserInfo(res);
					// tool.success('登录成功');
				}else{
					tool.error(res.codemessage);
				}
			} catch (e) {
				tool.captureError(e);
			} finally {
				tool.hideLoading();
			}
		});
	};
	/**
	 * 通过登录验证返回的信息，获取用户信息
	 * token换用户信息
	 */
	async function getUserInfo(loginRest) { 
		//记住密码
		if(rememberPwd.value){
			tool.saveLocalStorage("RP_USER_NAME",loginForm.loginName);
			tool.saveLocalStorage("RP_USER_PWD",loginForm.password);
		}else{
			tool.removeLocalStorage("RP_USER_NAME");
			tool.removeLocalStorage("RP_USER_PWD");
		}
		tool.saveLocalStorage(KEY_CONST.USER_TOKEN, loginRest.token||'');
		const userInfo = await loginApi.getUserInfo(); 
		loginRest.rep_u_name = userInfo.rep_u_name;
		loginRest.is_admin = userInfo.is_admin||false;//是否管理员(最高权限)
		loginRest.is_admin_bumen = userInfo.is_admin_bumen||false; //是否部门管理员（仅查询处理本部门的工单）
		loginRest.is_shr = userInfo.is_shr||false; //是否审核人
		loginRest.is_slr = userInfo.is_slr||false; //是否受理人
		loginRest.is_wxg = userInfo.is_wxg||false; //是否维修工
		loginRest.is_see_bumen = userInfo.is_see_bumen||false; //是否部门查询员（仅查询本部门的工单）
		tool.saveLocalStorage("USER_INFO",JSON.stringify(loginRest));
		useUserStore().setUserLoginInfo(loginRest);
		if(!useUserStore().is_normal_user){
			// router.replace('/work/workstation');
			window.location.href =VITE_APP_doMain+"#/work/workstation";
		}else{
			// router.replace('/home')
			window.location.href =VITE_APP_doMain+"#/shome";
		}
	}

</script>
<style lang="less" scoped>
	.login-container {
		width: 100%;
		height: 100%;
		background: url('/src/assets/images/login/login-bg.png') no-repeat center;
		background-size: cover;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		.sys-logo {
			position: absolute;
			top: 10px;
			left: 20px;
			img {
				height: 50px;
			}
		}

		.box-item {
			width: 444px;
			height: 600px;
			&.desc {
				background: #ffffff;
				border-radius: 12px 0px 0px 12px;
				box-shadow: 0px 16px 73px 8px rgba(203, 203, 203, 0.2);
			}
			&.login {
				background: #ffffff;
				border-radius: 0px 12px 12px 0px;
				padding: 34px 42px;
				position: relative;
				border: solid 1px #efefef;
			}
			.login-qr {
				position: absolute;
				top: 0;
				right: 0;
				width: 66px;
				height: 66px;
			}
			.logo {
				width: 180px;
				height: 42px;
				align-self: start;
			}
			.welcome {
				background: url(/src/assets/images/login/left-bg1.png) no-repeat center;
				background-size: cover;
				height: 100%;
				border-radius: 8px;
				box-shadow: 0px 6px 20px 0px rgba(33, 47, 117, 0.1);
				padding-top: 35px;
				p {
					color: #333333;
					line-height: 25px;
					letter-spacing: 0.26px;
					text-align: center;
					font-weight: 700;
					font-size: 26px;
				}
				.sub-welcome {
					color: #1677ff;
					line-height: 25px;
					letter-spacing: 0.26px;
					font-weight: 700;
					font-size: 20px;
					margin-right: 20px;
				}
			}

			.login-title {
				font-size: 30px;
				font-weight: 700;
				text-align: center;
				color: #1e1e1e;
				margin-bottom: 100px;
			}
			.login-form {
				.captcha-input {
					width: 60%;
				}

				.captcha-img {
					cursor: pointer;
				}
			}
			.ant-input,
			.ant-input-affix-wrapper {
				height: 44px;
				border: 1px solid #ededed;
				border-radius: 4px;
			}

			.code-btn {
				height: 44px;
				padding: 4px 5px;
				width: 108px;
			}

			.eye-box {
				position: absolute;
				right: 15px;
				top: 10px;
				.eye-icon {
					width: 20px;
					height: 20px;
					cursor: pointer;
				}
			}
			.btn {
				width: 350px;
				height: 50px;
				background: #1748fd;
				border-radius: 4px;
				font-size: 16px;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				line-height: 50px;
				cursor: pointer;
			}
		}

		.more {
			margin-top: 30px;
			.title-box {
				display: flex;
				align-items: center;
				justify-content: center;
				> p {
					margin-bottom: 0;
				}
			}
			.line {
				width: 90px;
				height: 1px;
				background: #e6e6e6;
			}
			.title {
				font-size: 14px;
				font-weight: 500;
				color: #a1aebe;
				margin: 0 19px;
			}
			.login-type {
				padding: 0 5px;
				margin-top: 25px;
				display: flex;
				align-items: center;
				justify-content: center;
				img {
					margin: 0 5px;
					width: 30px;
					height: 30px;
				}
			}
		}
	}
</style>
